<template>
<!--  -->
<!-- 此文件为自定义组件，列表显示 -->
<!--  -->
  <div>
    <el-table
      ref="dataTable"
      :data="dataSource.list || []"
      :height="tableHeight"
      :stripe="options.stripe"
      :border="options.border"
      header-row-class-name="table-header-row"
      highlight-current-row
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
    >
      <!-- selection选择框 -->
      <el-table-column
        v-if="options.selectType && options.selectType == 'checkbox'"
        type="selection"
        width="50"
        align="center"
      ></el-table-column>
      <!-- 序号 -->
      <el-table-column
        v-if="options.showIndex"
        label="序号"
        type="index"
        width="60"
        align="center"
      ></el-table-column>
      <!-- 数据列 -->
      <template v-for="(column, index) in columns">
        <template v-if="column.scopedSlots">
            <el-table-column
              :key="index"
              :prop="column.prop"
              :label="column.label"
              :align="column.align || 'left'"
              :width="column.width"
            >
              <template #default="scope">
                <slot
                  :name="column.scopedSlots"
                  :index="scope.$index"
                  :row="scope.row"
                ></slot>
              </template>
            </el-table-column>
        </template>
        <template v-else>
            <el-table-column
              :key="index"
              :prop="column.prop"
              :label="column.label"
              :align="column.align || 'left'"
              :width="column.width"
              :fixed="column.fixed"
            ></el-table-column>
        </template>
      </template>
    </el-table>

    <!-- 分页 -->
    <div class="pagination" v-if="showPagination">
        <el-pagination
          v-if="dataSource.totalCount"
          background
          :total="dataSource.totalCount"
          :page-sizes="[15, 30, 50, 100]"
          :page-size="dataSource.pageSize"
          :curren-page.sync="dataSource.pageNo"
          :layout="layout"
          @size-change="handlePageSizeChange"
          @current-change="handlePageNoChange"
          style="text-align: right"
        ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const emit = defineEmits(["rowSelected", "rowClick"]);     //子组件通过触发父组件的事件，并将参数传递到父组件
const props = defineProps({
    dataSource: Object,
    showPagination: {      //分页
        type: Boolean,
        default: true,
    },
    showPageSize: {
        type: Boolean,
        default: true,
    },
    options: {
        type: Object,       //序号
        default: {
            extHeight: 0,
            showIndex: false,
        },
    },
    columns: Array,        //数据列
    fetch: Function,       //获取数据的函数
    initFetch: {           //是否调用fetch进行初始化
        type: Boolean,
        default: true,
    },
});

//分页展示内容
const layout = computed(() => {
    return `total, ${
        props.showPageSize ? "sizes" : ""
    }, prev, pager, next, jumper`;
});

//顶部 60，内容区域距离顶部 20，内容上下内间距 15*2，分页区域高度46
const topHeight = 60 + 20 + 30 + 46;
//行高
const tableHeight = ref(
    props.options.tableHeight
      ? props.options.tableHeight
      : window.innerHeight - topHeight - props.options.extHeight
);

//初始化  -- props.fetch为父组件Main.vue传递过来的loadDataList方法
const init = () => {
    if (props.initFetch && props.fetch) {
        props.fetch();
    }
};
init();

const dataTable = ref();

//清除选中
const clearSelection = () => {
    dataTable.value.clearSelection();
};
//设置行选中
const setCurrentRow = (rowKey, rowValue) => {
    let row = props.dataSource.list.find((item) => {
        return item[rowKey] === rowValue;
    });
    dataTable.value.setCurrentRow(row);
};
defineExpose({ setCurrentRow, clearSelection });   //将子组件暴露出去，否则父组件无法调用


//行点击
const handleRowClick = (row) => {
    emit("rowClick", row);
};
//多选
const handleSelectionChange = (row) => {
    emit("rowSelected", row);
};


//切换每页显示数据条数
const handlePageSizeChange = (size) => {
    props.dataSource.pageSize = size;
    props.dataSource.pageNo = 1;
    props.fetch();
}
//切换页码
const handlePageNoChange = (pageNo) => {
    props.dataSource.pageNo = pageNo;
    props.fetch();
};

</script>

<style lang="scss" scoped>
.pagination {
    padding-top: 10px;
    padding-right: 10px;
}

.el-pagination {
    justify-content: right;
}

:deep .el-table__cell {
    padding: 4px 0px;
}
</style>